<template>
  <div class="internship-container">
    <el-card shadow="never">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <el-input
          v-model="filter.id"
          placeholder="编号"
          style="width: 120px"
          class="filter-item"
        />
        <el-input
          v-model="filter.name"
          placeholder="名称"
          style="width: 120px; margin-left: 10px"
          class="filter-item"
        />
        <el-input
          v-model="filter.company"
          placeholder="实习单位"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
        />
        <el-button type="primary" style="margin-left: 15px" @click="search">搜索</el-button>
        <el-button style="margin-left: 10px" @click="resetFilter">重置</el-button>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button type="text" icon="el-icon-circle-plus" @click="showPublishDialog">发布</el-button>
      </div>

      <!-- 数据表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        header-row-class-name="table-header"
        v-loading="loading"
      >
        <el-table-column type="selection" width="45" align="center"/>
        <el-table-column prop="id" label="编号" width="80"/>
        <el-table-column prop="name" label="名称" width="120"/>
        <el-table-column prop="requirement" label="申请要求" width="120"/>
        <el-table-column prop="start_time" label="开始时间" width="120"/>
        <el-table-column prop="end_time" label="结束时间" width="120"/>
        <el-table-column prop="deadline" label="申请截至时间" width="150"/>
        <el-table-column prop="company" label="单位名称" width="120"/>
        <el-table-column prop="company_info" label="单位简介" width="120" show-overflow-tooltip/>
        <el-table-column prop="weekly_count" label="周报数量" width="100" align="center"/>
        <el-table-column prop="weekly_requirement" label="周报要求" width="150" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.weekly_requirement }}...</template>
        </el-table-column>
        <el-table-column prop="weekly_percent" label="周报占比(%)" width="120" align="center"/>
        <el-table-column prop="total_percent" label="总括占比(%)" width="120" align="center"/>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button type="text" size="mini" style="color: #F56C6C" @click="showDeleteDialog(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页信息 -->
      <div class="footer-section">
        <div class="pagination-info">
          第{{ pagination.start }}到{{ pagination.end }}条，共{{ pagination.total }}条记录。
        </div>
        <div class="loading-text" v-if="loading">
          数据加载中，请稍后。
        </div>
      </div>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog :visible.sync="dialogVisible.edit" title="编辑实习信息">
      <div>
        <el-input v-model="currentRow.name" placeholder="名称"></el-input>
        <el-input v-model="currentRow.requirement" placeholder="申请要求"></el-input>
        
        <el-date-picker
          v-model="currentRow.start_time"
          type="date"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd"
          style="width: 100%; margin: 5px 0"
        ></el-date-picker>
        
        <el-date-picker
          v-model="currentRow.end_time"
          type="date"
          placeholder="选择结束时间"
          value-format="yyyy-MM-dd"
          style="width: 100%; margin: 5px 0"
        ></el-date-picker>
        
        <el-date-picker
          v-model="currentRow.deadline"
          type="date"
          placeholder="选择申请截止时间"
          value-format="yyyy-MM-dd"
          style="width: 100%; margin: 5px 0"
        ></el-date-picker>

        <el-input v-model="currentRow.company" placeholder="单位名称"></el-input>
        <el-input v-model="currentRow.company_info" placeholder="单位简介"></el-input>
        <el-input v-model="currentRow.weekly_count" placeholder="周报数量"></el-input>
        <el-input v-model="currentRow.weekly_requirement" placeholder="周报要求"></el-input>
        <el-input v-model="currentRow.weekly_percent" placeholder="周报占比(%)"></el-input>
        <el-input v-model="currentRow.total_percent" placeholder="总占比(%)"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.edit = false">取消</el-button>
        <el-button type="primary" @click="editItem">确定</el-button>
      </span>
    </el-dialog>

    <!-- 删除对话框 -->
    <el-dialog :visible.sync="dialogVisible.delete" title="删除确认">
      <span>确定要删除此项吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.delete = false">取消</el-button>
        <el-button type="primary" @click="deleteItem">确定</el-button>
      </span>
    </el-dialog>

    <!-- 发布对话框 -->
    <el-dialog :visible.sync="dialogVisible.publish" title="发布实习信息">
      <div>
        <el-input v-model="newItem.name" placeholder="名称"></el-input>
        <el-input v-model="newItem.requirement" placeholder="申请要求"></el-input>
        
        <el-date-picker
          v-model="newItem.start_time"
          type="date"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd"
          style="width: 100%; margin: 5px 0"
        ></el-date-picker>
        
        <el-date-picker
          v-model="newItem.end_time"
          type="date"
          placeholder="选择结束时间"
          value-format="yyyy-MM-dd"
          style="width: 100%; margin: 5px 0"
        ></el-date-picker>
        
        <el-date-picker
          v-model="newItem.deadline"
          type="date"
          placeholder="选择申请截止时间"
          value-format="yyyy-MM-dd"
          style="width: 100%; margin: 5px 0"
        ></el-date-picker>

        <el-input v-model="newItem.company" placeholder="单位名称"></el-input>
        <el-input v-model="newItem.company_info" placeholder="单位简介"></el-input>
        <el-input v-model="newItem.weekly_count" placeholder="周报数量"></el-input>
        <el-input v-model="newItem.weekly_requirement" placeholder="周报要求"></el-input>
        <el-input v-model="newItem.weekly_percent" placeholder="周报占比(%)"></el-input>
        <el-input v-model="newItem.total_percent" placeholder="总占比(%)"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.publish = false">取消</el-button>
        <el-button type="primary" @click="publishItem">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      filter: {
        id: '',
        name: '',
        company: ''
      },
      originalData: [
        {
          id: 4,
          name: '生产实习',
          requirement: '无挂科',
          start_time: '2022-01-02',
          end_time: '2023-02-28',
          deadline: '2023-01-01',
          company: '华为',
          company_info: '无',
          weekly_count: 5,
          weekly_requirement: '周报不少',
          weekly_percent: 40,
          total_percent: 60
        },
        {
          id: 5,
          name: '生产实习',
          requirement: '333',
          start_time: '2020-01-01',
          end_time: '2020-01-09',
          deadline: '2020-01-16',
          company: '333',
          company_info: '33',
          weekly_count: 3,
          weekly_requirement: '周报不少',
          weekly_percent: 40,
          total_percent: 60
        }
      ],
      tableData: [],
      dialogVisible: {
        publish: false,
        edit: false,
        delete: false
      },
      pagination: {
        start: 1,
        end: 0,
        total: 0
      },
      currentRow: {},
      newItem: {}
    };
  },
  methods: {
    search() {
      this.tableData = this.originalData.filter(item => {
        const idMatch = this.filter.id ? String(item.id).includes(this.filter.id) : true
        const nameMatch = this.filter.name ? item.name.toLowerCase().includes(this.filter.name.toLowerCase()) : true
        const companyMatch = this.filter.company ? item.company.toLowerCase().includes(this.filter.company.toLowerCase()) : true
        return idMatch && nameMatch && companyMatch
      })
      
      this.pagination.total = this.tableData.length
      this.pagination.start = 1
      this.pagination.end = this.tableData.length
    },
    resetFilter() {
      this.filter = { id: '', name: '', company: '' };
      this.search()
    },
    showPublishDialog() {
      this.newItem = {
        name: '',
        requirement: '',
        start_time: '',
        end_time: '',
        deadline: '',
        company: '',
        company_info: '',
        weekly_count: '',
        weekly_requirement: '',
        weekly_percent: '',
        total_percent: ''
      }
      this.dialogVisible.publish = true;
    },
    publishItem() {
      this.originalData.push({ 
        ...this.newItem, 
        id: Date.now() 
      })
      this.search()
      this.dialogVisible.publish = false;
    },
    showEditDialog(row) {
      this.currentRow = { ...row };
      this.dialogVisible.edit = true;
    },
    editItem() {
      const index = this.originalData.findIndex(item => item.id === this.currentRow.id);
      if (index !== -1) {
        this.originalData.splice(index, 1, { ...this.currentRow });
        this.search()
      }
      this.dialogVisible.edit = false;
    },
    showDeleteDialog(row) {
      this.currentRow = row;
      this.dialogVisible.delete = true;
    },
    deleteItem() {
      const index = this.originalData.findIndex(item => item.id === this.currentRow.id);
      if (index !== -1) {
        this.originalData.splice(index, 1);
        this.search()
      }
      this.dialogVisible.delete = false;
    }
  },
  mounted() {
    this.tableData = [...this.originalData]
    this.pagination.total = this.originalData.length
    this.pagination.end = this.originalData.length
    setTimeout(() => {
      this.loading = false;
    }, 1500);
  }
};
</script>

<style scoped>
/* 原有样式保持不变 */
.internship-container {
  padding: 20px;
}

.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.action-buttons {
  margin: 15px 0 20px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
}

.footer-section {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-info {
  color: #909399;
  font-size: 13px;
}

.loading-text {
  color: #606266;
  font-size: 13px;
  font-style: italic;
}

.el-button--text {
  padding: 0 5px;
}

/* 复选框样式 */
.el-table__header .el-checkbox__inner {
  border-radius: 2px;
  border-color: #DCDFE6;
}
</style>